<template>
  <div>
    <ul class="gameinfo-box">
      <li
        v-for="(item, index) in list"
        :key="index"
        class="screen-list-info list-box"
        @click="itemClick(index)"
      >
        <div class="gameicon">
          <img :src="item.gameicon" alt="" />
        </div>
        <div class="game-list">
          <div class="gamename">
            <div class="gamename-name">
              <div v-if="item.game_type != 1" class="gamename-name-type-item">{{ item.gamename}}</div>
              <div v-else class="gamename-name-item">{{ item.gamename }}</div>
            </div>
            <div class="ganename-discount" v-show="!item.hide_discount_label && item.game_type != 1">
              <span v-if="!item.is_flash">{{ item.discount }}折</span>
              <span v-else>{{ item.flash_discount }}折</span>
            </div>
          </div>
          <div class="genre-str">
            <!-- 游戏包大小 -->
              <div v-show="item.client_size != '0.0' && item.game_type != 3" v-if="!item.first_label">{{item.client_size}}M 丨 </div>
              <!-- 游戏类型 -->
              <div>{{item.genre_str}}</div>
              <!-- 游戏活动代金券 -->
              <ul v-show="item.game_labels != null && item.game_type != 1" class="genre-str-label">
                <li v-for="(label, i) in item.game_labels" :key="i" :style="{border: '.013333rem solid' + label.bgcolor,'color': label.bgcolor}">{{label.label_name}}</li>
              </ul>
              <!-- 首发时间 -->
              <div class="first-label" v-if="item.first_label" :style="{border: '.013333rem solid' + item.first_label.bgcolor,'color': item.first_label.bgcolor}">{{item.first_label.label_name}}</div>
            </div>
          <div>
            <div v-if="item.game_type == 1" class="game_type_box">
              <span
                v-for="(label, i) in item.game_labels"
                :key="i"
                class="labels"
                :style="{ background: label.bgcolor + '2d' }"
              >
                <div :style="{ color: label.bgcolor }" class="labels-text">
                  {{ label.label_name }}
                </div>
              </span>
            </div>
            <div v-else class="game-summary">{{ item.game_summary }}</div>
          </div>
        </div>
        <div class="download">
          <div class="download-img" v-if="item.has_coupon == 1">
            <!-- <img src="../../../assets/img/home/conpon.png" alt="" /> -->
          </div>
          <div class="download-btn">
            <span v-if="item.game_type == 3">开始</span>
            <span v-else>下载</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods: {
    itemClick(index) {
      // this.$router.push("/gameinfo/gameid/" + this.list[index].gameid);
    },
  },
  //文字截取
  filters: {
    filterFun: function (value) {
      if (value && value.length > 10) {
        //字符最大长度
        value = value.substring(0, 10) + "..."; //超过省略
      }

      return value;
    },
    firstTime: function (value) {
      let new_time = new Date() / 1000
      let old_time = value
      let new_time_day = new_time / 3600
      let old_time_day = new_time / 3600
    }
  },
};
</script>

<style scoped>
.screen-list-info img {
  width: 1.84rem;
  height: 1.84rem;
}

.list-box {
  width: 8.933333rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: .266667rem 0;
  border-bottom: .013333rem solid #eeeeee;
}

.gameicon {
  flex-shrink: 1;
}

.gameicon img {
  width: 1.84rem;
  height: 1.84rem;
  border-radius: .4rem;
  overflow: hidden;
}

.game-list {
  margin-left: .186667rem;
  height: 1.84rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.gamename {
  display: flex;
  align-items: center;
  font-size: .4rem;
  font-weight: 700;
  color: #222222;
}

.gamename-name {
  font-size: .4rem;
  font-weight: 700;
  color: #222222;
}

.gamename-name-type-item {
  width: 4.133333rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.gamename-name .gamename-name-item {
  width: 5.333333rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ganename-discount {
  margin-left: .133333rem;
  width: 1.066667rem;
  height: .426667rem;
  background: #ea3323;
  border-radius: .213333rem;
  font-size: .32rem;
  font-weight: 400;
  color: #ffffff;
  line-height: .426667rem;
  text-align: center;
}

.genre-str {
  display: flex;
  align-items: center;
  font-size: .32rem;
  font-weight: 400;
  color: #808080;
}

.genre-str-label {
  display: flex;
  align-items: center;
}

.genre-str-label li {
  display: flex;
  align-items: center;
  height: .426667rem;
  font-size: .266667rem;
  line-height: .426667rem;
  border-radius: .08rem;
  padding: 0 .066667rem;
  margin-left: .133333rem;
}

.game_type_box {
  width: 5.36rem;
  height: .96rem;
  font-size: .266667rem;
  overflow: hidden;
}

.first-label {
  height: .32rem;
  font-size: .24rem;
  line-height: .32rem;
  border-radius: .08rem;
  padding: 0 .066667rem;
  margin-left: .133333rem;
}

.labels {
  display: inline-block;
  height: .4rem;
  padding: 0 .053333rem;
  margin-right: .08rem;
  margin-bottom: .08rem;
}

.labels-text {
  font-size: .266667rem;
  line-height: .4rem;
  text-align: center;
}

.game-summary {
  font-size: .32rem;
  font-weight: 400;
  color: #808080;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 5.333333rem;
}

.download {
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-img {
  width: 1.186667rem;
  height: .573333rem;
  margin-top: -0.666667rem;
}

.download-img img {
  width: 1.186667rem;
  height: .573333rem;
}

.download-btn {
  width: 1.546667rem;
  height: .666667rem;
  background: linear-gradient(-36deg, #FF1814, #FF7401);
  border-radius: .333333rem;
  font-size: .346667rem;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: .666667rem;
  margin-top: .133333rem;
}
</style>